import React, { Component } from 'react'

export default class ControlCom2 extends Component {
  // 1. 声明状态
  state = {
    user: '',
    pass: '',
    rememberMe: false
  }

  // 3. 绑定 onChange 事件, 更新状态
  saveUser = (e) => {
    this.setState({
      user: e.target.value
    })
  }

  savePass = e => {
    this.setState({
      pass: e.target.value
    })
  }

  saveRemeber = e => {
    // console.log(e.target.checked)
    this.setState({
      rememberMe: e.target.checked
    })
  }

  //登录的事件回调
  login = (e) => {
    e.preventDefault();
    //解构赋值
    let {user, pass, rememberMe} = this.state;
    //获取值
    console.log(`用户名: ${user}  密码:${pass}  记住我: ${rememberMe} `)
  }

  render() {
    //解构赋值
    let {user, pass, rememberMe} = this.state;

    return (
      <form>
        <h2>用户登录</h2>
        <hr />
        {/* 2. 状态值作为 input 的 value 值 */}
        用户名: <input type="text" value={user}  onChange={this.saveUser} /><br />
        密码: <input type="password" value={pass}  onChange={this.savePass} /><br />
        记住我: <input type="checkbox" checked={rememberMe} onChange={this.saveRemeber} />
        <hr />
        <button onClick={this.login}>登录</button>
        <button>重置</button>
      </form>
    )
  }
}